<template>
  <div class="container">
    <h1 class="topTitle">漫游</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()" @click="showLatLng">
        <l-tile-layer :url="mapOptions.url"></l-tile-layer>

        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>
  const iconUrl= ''

  import  '../../../plugins/leaflet.rotatedMarker.js';
  import MoveMarker from '../../../plugins/MovingMarker.js';
  export default {
  name: "MoveMarkerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject
      var history = [
        [40.560973405725605, 117.39759528230178],
        [40.82752741643437, 116.73848761545054],
        [40.99358185112949, 116.51878505983346],
        [40.72769464076503, 116.23317173753125],
        [40.61103350191553, 116.0574096930376],
        [40.52757919400909, 115.79376662629709],
        [40.243056550713874, 115.88164764854389],
        [40.09194062734725, 115.66194509292681],
        [39.822459994009435, 115.48618304843318],
        [39.56885825751457, 115.5520938151183],
        [39.51802614184795, 116.12332045972268],
        [39.501073830060704, 116.38696352646319],
        [39.56885825751457, 117.04607119331446],
        [39.88992969265996, 117.26577374893154],
        [40.12555101503511, 117.37562502674005],
        [40.36035847925934, 117.26577374893154]
      ]
      var myIcon = L.icon({
        iconUrl: iconUrl,
        iconSize: [40,40],
        iconAnchor: [20,20],
        popupAnchor: [0,-25]
      });

      var myMovingMarker = L.Marker.movingMarker(history , 10000,{icon: myIcon,rotationAngle: 45}
      ).addTo(this.map);
      myMovingMarker.on('click', function() {
        if (myMovingMarker.isRunning()) {
          myMovingMarker.pause();
        } else {
          myMovingMarker.start();
        }
      });
      console.log(myMovingMarker)
      L.polyline(history, {color: 'red'}).addTo(this.map);
      this.map.fitBounds(history);

      myMovingMarker.start();

    },
    showLatLng(e){
      console.log(e.latlng);
    },

  },
  mounted() {
  }
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>